<li class="nav-item">
  <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvasSettings" role="button"
    aria-controls="offcanvasSettings">
    <i class="fas fa-fw fa-sliders-h"></i> {{ i18n "settings" }}
  </a>
</li>

<div class="offcanvas offcanvas-end surface h-100" tabindex="-1" id="offcanvasSettings"
  aria-labelledby="offcanvasSettingsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" w id="offcanvasSettingsLabel"><i class="fas fa-fw fa-sliders-h"></i> {{ i18n "settings" }}</h5>
    <a role="button" data-bs-dismiss="offcanvas" aria-label="Close">
      <span class="fas fa-2x fa-fw fa-times"></span>
    </a>
  </div>
  <div class="offcanvas-body">
    {{- partial "header/settings/mode" . -}}
    {{- partial "header/settings/languages" . -}}
    {{- partial "header/settings/font-sizes" . -}}
    {{- partial "header/settings/palettes" . -}}
  </div>
</div>